<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <!-- 左侧导航栏 -->
    <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246)">
      <Sidebar />
    </el-aside>

    <!-- 右侧内容 -->
    <el-container>
      <!-- 页面头部 -->
      <el-header style="background-color: #409EFF; padding: 10px; color: white">
        <div style="display: flex; align-items: center">
          <!-- 头像 -->
          <el-avatar
              size="60"
              src="https://tse2-mm.cn.bing.net/th/id/OIP-C.KXyKVyQgsaqsg7dRS3bGmgHaGN?w=212&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
              alt="头像"
              style="margin-right: 20px"
          />
          <!-- 用户信息 -->
          <div>
            <h2 style="margin: 0; font-size: 24px">熊老师</h2>
            <p style="margin: 0; font-size: 16px">大数据老师</p>
          </div>
        </div>
      </el-header>

      <!-- 页面主体 -->
      <el-main style="padding: 20px">
        <el-card shadow="always" style="margin-top: 30px;">
          <el-form ref="practiceForm" :model="formData" label-width="120px" label-position="right" class="practice-form">
            <!-- 作业名称 -->
            <el-form-item label="本次作业名称" prop="name" class="form-item">
              <el-input v-model="formData.name" placeholder="请输入作业名称" class="input-field"></el-input>
            </el-form-item>

            <!-- 班级选择 -->
            <el-form-item label="班级选择" prop="class_number" class="form-item">
              <el-radio-group v-model="formData.class_number" class="radio-group">
                <el-radio label="81">81班</el-radio>
                <el-radio label="82">82班</el-radio>
                <el-radio label="83">83班</el-radio>
                <el-radio label="84">84班</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 题量选择 -->
            <el-form-item label="题量选择" prop="questionAmount" class="form-item">
              <el-radio-group v-model="formData.questionAmount" class="radio-group">
                <el-radio value="small">较少</el-radio>
                <el-radio value="medium">正常</el-radio>
                <el-radio value="large">较多</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 章节选择 -->
            <el-form-item label="章节选择" prop="chapters" class="form-item">
              <el-checkbox-group v-model="formData.chapters" class="checkbox-group">
                <el-checkbox value="1">第一章</el-checkbox>
                <el-checkbox value="2">第二章</el-checkbox>
                <el-checkbox value="3">第三章</el-checkbox>
                <el-checkbox value="4">第四章</el-checkbox>
                <el-checkbox value="5">第五章</el-checkbox>
                <el-checkbox value="6">第六章</el-checkbox>
                <el-checkbox value="7">第七章</el-checkbox>
                <el-checkbox value="8">第八章</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <!-- 开始时间 -->
            <el-form-item label="开始时间" prop="startTime" class="form-item">
              <el-date-picker
                  v-model="formData.startTime"
                  type="datetime"
                  placeholder="选择开始时间"
                  class="date-picker"
              ></el-date-picker>
            </el-form-item>

            <!-- 结束时间 -->
            <el-form-item label="结束时间" prop="endTime" class="form-item">
              <el-date-picker
                  v-model="formData.endTime"
                  type="datetime"
                  placeholder="选择结束时间"
                  class="date-picker"
              ></el-date-picker>
            </el-form-item>

            <!-- 提交和重置按钮 -->
            <el-form-item class="form-item">
              <el-button type="primary" @click="submitForm" class="submit-button">提交</el-button>
              <el-button @click="resetForm" class="reset-button">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Sidebar from "@/views/SidebarForT.vue";
import axios from "axios"; // 引入 Sidebar 组件

export default {
  components: {
    Sidebar, // 注册 Sidebar 组件
  },
  data() {
    return {
      sideWidth: 200, // 侧边栏宽度
      formData: {
        name: "",
        class_number: "81", // 默认选择 81班
        questionAmount: "",
        chapters: [],
        startTime: new Date(), // 初始化为当前时间
        endTime: new Date() // 初始化为当前时间
      },
      chapters: [
        { label: "第一章", value: "第一章" },
        { label: "第二章", value: "第二章" },
        { label: "第三章", value: "第三章" },
        { label: "第四章", value: "第四章" },
        { label: "第五章", value: "第五章" },
        { label: "第六章", value: "第六章" },
        { label: "第七章", value: "第七章" },
        { label: "第八章", value: "第八章" }
      ]
    };
  },
  methods: {
    submitForm() {
      this.formData.chapters=this.formData.chapters.join(",");
      axios.get('http://localhost:80/questions/assignToClass', {
        params: {
          name: this.formData.name,
          questionAmount: this.formData.questionAmount,
          chapterRange: this.formData.chapters, // 将章节转换为数字数组
          startTime: this.formData.startTime,
          endTime: this.formData.endTime,
          stuclass:this.formData.class_number
        }
      }),
      this.$refs.practiceForm.validate((valid) => {
        if (valid) {
          console.log("表单数据：", this.formData);
          this.$message.success("提交成功！");
        } else {
          this.$message.error("请检查表单内容！");
        }
      });
    },
    resetForm() {
      this.$refs.practiceForm.resetFields();
      this.formData.startTime = new Date(); // 重置为当前时间
      this.formData.endTime = new Date(); // 重置为当前时间
      this.formData.class_number = "81"; // 重置班级选择为默认值
    }
  }
};
</script>

<style scoped>
/* 自定义样式 */
.dialog-footer {
  text-align: right;
}
</style>
